<!-- 账单减免 -->
<template>
  <div style="padding: 15px 30px">
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="空间类型">
            <el-input v-model="m_Form.spaceTypeName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商铺编码">
            <el-input v-model="m_Form.shopCode" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门牌号码">
            <el-input v-model="m_Form.shopNumber" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="display: flex; justify-content: space-between" class="padding-top-15">
      <div class="font-size-16 font-weight-700">当前客户</div>
      <div></div>
    </div>
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="起租时间">
            <!-- <el-input v-model="m_Form.contractBeginDate" readonly></el-input> -->
            <el-date-picker v-model="m_Form.contractBeginDate" type="date" readonly> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input v-model="m_Form.contractName" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div style="display: flex; justify-content: space-between" class="padding-top-15">
      <div class="font-size-16 font-weight-700">历史客户</div>
      <div></div>
    </div>
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row v-for="(item, index) in m_Form.contractRentalHistoryDtoList" :key="index">
        <el-col :span="8">
          <el-form-item label="起租时间">
            <!-- <el-input v-model="item.contractBeginDate" readonly></el-input> -->
            <el-date-picker v-model="item.contractBeginDate" type="date" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退场时间">
            <!-- <el-input v-model="item.contractEndDate" readonly></el-input> -->
            <el-date-picker v-model="item.contractEndDate" type="date" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input v-model="item.contractName" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import Api from '../../../api/projectInfo';
export default {
  components: {},
  data() {
    return {
      m_Form: {
        contractName: '',
        shopCode: '',
        shopNumber: '',
        spaceTypeName: '',
        contractRentalHistoryDtoList: [],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //接收参数
  props: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.GetData();
  },
  //方法集合
  methods: {
    GetData() {
      //6f0becd6e21347fab4836990db809a7f
      Api.rentalHistory({ primaryKey: this.$route.query.primaryKey }).then(res => {
        this.m_Form = res;
      });
      
      
    },
    //   退回
    goBack() {},
    //   同意
    submit() {},
  },
};
</script>
<style scoped lang="scss" >
.flex-box {
  height: 50px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;

  justify-content: space-between;
  .large-title {
    font-size: 18px;
  }
}
.table-margin {
  margin: 15px 0;
}

.file-box {
  line-height: 34px;
  cursor: pointer;
}
</style>